<template>
  <div class="rechargeRecordList">
    <el-card class="box-card"
             shadow="never">
      <ele-pro-table ref="table"
                     :columns="columns"
                     :datasource="datasource"
                     :selection.sync="selection"
                     cache-key="systemUserTable">
        <template v-slot:orderNumber="{ row }">
          <div>
            {{ row.orderNumber? row.orderNumber:'-----' }}

          </div>
        </template>
        <!-- 名字 -->
        <template v-slot:integral="{ row }">
          <div class="realNameStyle">

            <span :style="{ color:balanceAction(row).color}"> {{ balanceAction(row).integral}}</span>
          </div>
        </template>
        <!-- 1 签到 2 邀请 3 下单 4 后台操作 -->
        <template v-slot:payType="{ row }">
          <el-tag v-if="row.type == '1'"
                  type="warning">签到</el-tag>
          <el-tag v-if="row.type == '2'"
                  type="success">邀请</el-tag>
          <el-tag v-if="row.type == '3'"
                  type="warning">下单</el-tag>
          <el-tag v-if="row.type == '4'"
                  type="primary">后台操作</el-tag>
          <el-tag v-if="row.type == '5'"
                  type="danger">退款</el-tag>
        </template>
        <!-- 操作 -->
        <template v-slot:action="{ row }">

          <el-popconfirm class="ele-action"
                         title="是否确定要删除改信息"
                         @confirm="remove(row)">
            <template v-slot:reference>
              <el-link type="danger"
                       :underline="false"
                       icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>

    </el-card>
    <!-- 用户余额管理 -->
    <!-- <drawerUserBalance :drawerUserBalance.sync="drawerUserBalance"></drawerUserBalance> -->
    <!-- 评论页面 -->
    <!-- <drawerComment :drawComment.sync="drawComment"></drawerComment> -->
  </div>
</template>
  <script>

// import drawerUserBalance from './drawerUserBalance.vue'
import { integralList, integralDelete } from '@/api/userList/index.js'
// import drawerDetail from './drawerDetail.vue'
import { serviceStatusList, realNameAuthenticationList, rechargeRecordData } from '../constant/constant'
import { color } from 'echarts/core';
export default {
  name: 'rechargeRecordList',
  components: {
    // 用户余额管理
    // drawerUserBalance,

    // // 评论
    // drawerComment
  },
  props: {

    userIdRecharge: String,
    sumbitBoolen: Boolean
  },
  data () {
    return {
      rechargeRecordData,
      //  技能评分
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      value: 4,

      // 表格列配置
      columns: [

        {
          columnKey: 'index',
          type: 'index',
          label: '序号',
          width: 60,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'orderNumber',
          label: '订单编号',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'orderNumber',
        },
        {
          prop: 'payType',
          label: '支付方式',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'payType',
        },
        {
          prop: 'integral',
          label: '积分操作',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'integral',
        },


        {
          columnKey: 'action',
          label: '操作',

          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true,

          fixed: 'right'
        }
      ],
      // 表格选中数据
      selection: [],
      // 抽屉是否显示
      drawerUserBalance: false,
      // 评论是否显示
      drawComment: false,
      rechargeuserId: '',
      getIntegral: ''

    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    },

    // 余额操作
    balanceAction () {
      return function (row) {

        if (row.integralType == '2') {
          return {
            integral: '-' + row.integral,
            color: "#ff4d4f"
          }
        } else {
          return {
            integral: '+' + row.integral,
            color: "#1890ff"
          }
        }
        // 获取字符串中以 "+100" 开头的 "+" 符号

        // return balanceAction
      };
    },
  },
  methods: {
    // 点击查看详情弹出详情抽屉
    viewDetail () {
      // 用户余额管理
      this.drawerUserBalance = !this.drawerUserBalance
      // 评论 

      //   this.drawComment = !this.drawComment
    },

    /* 表格数据源 */
    async datasource ({ page, limit, where, order }) {
      const res = await integralList({
        page,
        limit,
        userId: this.rechargeuserId
      })
      this.getIntegral = res.list[0]?.integral
      return res
    },
    /* 刷新表格 */
    async reload (where) {
      const res = await integralList({ page: 1, where: where, types: 1 })
      this.getIntegral = res.list[0]?.integral
      this.$refs.table.reload({ page: 1, where: where, types: 1 });
      this.$emit('done', this.getIntegral)

    },

    /* 删除 */
    remove (row) {
      const loading = this.$loading({ lock: true });
      integralDelete(row.id)
        .then((msg) => {
          loading.close();
          this.$message.success(msg);
          this.reload();
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },
    /* 批量删除 */
    removeBatch () {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      this.$confirm('确定要删除选中的套餐吗?', '提示', {
        type: 'warning'
      })
        .then(() => {
          const loading = this.$loading({ lock: true });
          removeMeal({ ids: this.selection.map((d) => d.id) })
            .then((msg) => {
              loading.close();
              this.$message.success(msg);
              this.reload();
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        })
        .catch(() => { });
    },

  },
  watch: {
    userIdRecharge: {
      handler (value) {
        console.log(value);
        this.rechargeuserId = value;
      },
      immediate: true, // 立即执行一次
    },
    sumbitBoolen: {
      handler (value) {
        console.log('====================================')
        this.reload()
      },
      immediate: true,

    }
  },

};
  </script>
  <style lang="less" scoped>
.userManagementList {
  .realNameStyle {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .avaterName {
      width: 32px;
      height: 32px;
      border-radius: 32px;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
}
/deep/.el-button--mini {
  padding: 9px 8px;
}
</style>